<!DOCTYPE html>
<html lang="en">

<head>
    <title>{{providerId}} API - OpenAPI and SLOP Comparison</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <meta name="description" content="{{description}}" />
    <meta name="robots" content="index, follow" />

    <!-- 100% privacy-first analytics -->
    <script async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>

    <!-- Facebook Meta Tags -->
    <meta property="og:url" content="https://openapisearch.com" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="{{title}}" />
    <meta property="og:description" content="{{description}}" />
    <meta property="og:image" content="https://og.openapisearch.com/{{providerId}}" />
    <meta property="og:image:alt" content="{{description}}" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <!-- Twitter Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="twitter:domain" content="openapisearch.com" />
    <meta property="twitter:url" content="https://openapisearch.com" />
    <meta name="twitter:title" content="{{title}}" />
    <meta name="twitter:description" content="{{description}}" />
    <meta name="twitter:image" content="https://og.openapisearch.com/{{providerId}}" />

    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-50 m-0 p-5 font-sans">
    <div class="max-w-7xl mx-auto p-5">
        <a href="/"
            class="inline-flex items-center text-indigo-600 no-underline font-medium mb-4 transition duration-200 hover:text-indigo-800">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
                <path d="M19 12H5"></path>
                <path d="M12 19l-7-7 7-7"></path>
            </svg>
            Back to All APIs
        </a>

        <header
            class="bg-indigo-600 p-5 text-center text-white rounded-t-lg relative flex flex-row items-center justify-center">
            <img src="https://openapisearch.com/logo/{{providerId}}" width="40" height="40" style="margin-right: 20px;"
                onerror="this.style.display='none';" />

            <h1 class="m-0 text-2xl">Allow LLMs to Navigate the {{name}} API without Error</h1>
        </header>

        <div class="flex flex-wrap gap-5">
            <div class="flex-1 min-w-[300px] rounded-lg overflow-hidden shadow-md bg-yellow-50">
                <div class="p-4 flex justify-between items-center text-yellow-800">
                    <h2 class="m-0 text-lg">OpenAPI</h2>
                    <span id="openapi-token-count"
                        class="bg-yellow-200 bg-opacity-50 px-2 py-1 rounded text-sm">Loading...</span>
                </div>
                <div class="relative bg-yellow-100 bg-opacity-20 rounded-b-lg">
                    <textarea id="openapi-code" readonly
                        class="w-full h-[400px] p-4 font-mono text-sm leading-relaxed border-none bg-transparent resize-none box-border">Loading OpenAPI specification...</textarea>
                    <button id="copy-openapi"
                        class="absolute top-2.5 right-2.5 bg-indigo-600 text-white border-none rounded px-3 py-2 cursor-pointer text-xs transition duration-200 hover:bg-indigo-800">Copy</button>
                </div>
                <div class="flex flex-row gap-4 items-center justify-center">
                    <div class="flex justify-center mt-4">
                        <a href="/openapi/{{providerId}}"
                            class="bg-indigo-600 text-white border-none rounded px-3 py-2 cursor-pointer text-sm transition duration-200 hover:bg-indigo-800"
                            target="_blank">View OpenAPI</a>
                    </div>
                    <div class="flex justify-center mt-4">
                        <a href="/redirect/{{providerId}}"
                            class="bg-indigo-600 text-white border-none rounded px-3 py-2 cursor-pointer text-sm transition duration-200 hover:bg-indigo-800"
                            target="_blank">View Original</a>
                    </div>
                </div>
            </div>

            <div class="flex-1 min-w-[300px] rounded-lg overflow-hidden shadow-md bg-green-50">
                <div class="p-4 flex justify-between items-center text-green-800">
                    <h2 class="m-0 text-lg">SLOP</h2>
                    <span id="slop-token-count"
                        class="bg-green-200 bg-opacity-50 px-2 py-1 rounded text-sm">Loading...</span>
                </div>
                <div class="relative bg-green-100 bg-opacity-20 rounded-b-lg">
                    <textarea id="slop-code" readonly
                        class="w-full h-[400px] p-4 font-mono text-sm leading-relaxed border-none bg-transparent resize-none box-border">Loading SLOP specification...</textarea>
                    <button id="copy-slop"
                        class="absolute top-2.5 right-2.5 bg-indigo-600 text-white border-none rounded px-3 py-2 cursor-pointer text-xs transition duration-200 hover:bg-indigo-800">Copy</button>
                </div>
                <div class="flex justify-center mt-4 mb-4">
                    <a href="https://oapis.org/slop/{{providerId}}"
                        class="bg-indigo-600 text-white border-none rounded px-3 py-2 cursor-pointer text-sm transition duration-200 hover:bg-indigo-800"
                        target="_blank">Open SLOP Externally</a>
                </div>
            </div>
        </div>

        <!-- New Route Explorer Section -->
        <div class="mt-6 rounded-lg overflow-hidden shadow-md bg-blue-50">
            <div class="p-4 bg-blue-600 text-white">
                <h2 class="m-0 text-lg">Try a Route</h2>
            </div>
            <div class="p-4">
                <div class="flex flex-col gap-3">
                    <p class="text-sm text-gray-700">Enter an operationId or route path to explore details:</p>
                    <input type="text" id="route-input" placeholder="Enter operationId or route (e.g. repos/get)"
                        class="w-full p-3 border border-gray-300 rounded-md font-mono text-sm" />
                    <div class="text-sm text-gray-600">
                        URL: <span id="route-url" class="font-mono">https://oapis.org/openapi/{{providerId}}/</span>
                    </div>
                    <div class="flex justify-end">
                        <button id="explore-route"
                            class="bg-blue-600 text-white border-none rounded px-4 py-2 cursor-pointer text-sm transition duration-200 hover:bg-blue-800">Explore
                            Route</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-10 text-center p-5 bg-indigo-100 rounded-lg">
            <h2 class="text-xl">Looking for More APIs?</h2>
            <p class="mt-2">Discover and explore other OpenAPI specifications to enhance your LLM integrations.</p>
            <a href="/"
                class="inline-block bg-indigo-600 text-white px-5 py-2.5 rounded-md no-underline font-medium mt-2.5 transition duration-200 hover:bg-indigo-800">Explore
                Other OpenAPIs</a>
        </div>

        <div class="mt-8 text-center text-gray-500 text-sm">
            <p>Compare token counts and formats between OpenAPI and SLOP</p>
        </div>
    </div>

    <script>
        // Function to calculate tokens
        function calculateTokens(text) {
            return Math.round(text.length / 5);
        }

        // Copy to clipboard function
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                // Success
            }).catch(err => {
                console.error('Could not copy text: ', err);
            });
        }

        // Fetch the specifications in parallel with improved error handling
        async function fetchSpecifications() {
            const openApiCodeElement = document.getElementById('openapi-code');
            const slopCodeElement = document.getElementById('slop-code');
            const openApiTokenCountElement = document.getElementById('openapi-token-count');
            const slopTokenCountElement = document.getElementById('slop-token-count');

            // Setup copy buttons
            document.getElementById('copy-openapi').addEventListener('click', () => {
                copyToClipboard(openApiCodeElement.value);
                document.getElementById('copy-openapi').textContent = 'Copied!';
                setTimeout(() => {
                    document.getElementById('copy-openapi').textContent = 'Copy';
                }, 2000);
            });

            document.getElementById('copy-slop').addEventListener('click', () => {
                copyToClipboard(slopCodeElement.value);
                document.getElementById('copy-slop').textContent = 'Copied!';
                setTimeout(() => {
                    document.getElementById('copy-slop').textContent = 'Copy';
                }, 2000);
            });

            // Fetch OpenAPI specification independently
            fetch('https://openapisearch.com/openapi/{{providerId}}')
                .then(response => {
                    return response.text().then(text => {
                        if (!response.ok) {
                            return `Error ${response.status} - ${text || 'Failed to fetch OpenAPI specification'}`;
                        }
                        return text;
                    });
                })
                .then(text => {
                    openApiCodeElement.value = text;
                    const openApiTokens = calculateTokens(text);
                    openApiTokenCountElement.textContent = openApiTokens.toLocaleString() + ' tokens';
                })
                .catch(error => {
                    console.error('Error fetching OpenAPI specification:', error);
                    openApiCodeElement.value = `Error - ${error.message || 'Failed to fetch OpenAPI specification'}`;
                    openApiTokenCountElement.textContent = '0 tokens';
                });

            // Fetch SLOP specification independently
            fetch('https://oapis.org/slop/{{providerId}}')
                .then(response => {
                    return response.text().then(text => {
                        if (!response.ok) {
                            return `Error ${response.status} - ${text || 'Failed to fetch SLOP specification'}`;
                        }
                        return text;
                    });
                })
                .then(text => {
                    slopCodeElement.value = text;
                    const slopTokens = calculateTokens(text);
                    slopTokenCountElement.textContent = slopTokens.toLocaleString() + ' tokens';
                })
                .catch(error => {
                    console.error('Error fetching SLOP specification:', error);
                    slopCodeElement.value = `Error - ${error.message || 'Failed to fetch SLOP specification'}`;
                    slopTokenCountElement.textContent = '0 tokens';
                });
        }

        // Route explorer functionality
        function setupRouteExplorer() {
            const routeInput = document.getElementById('route-input');
            const routeUrl = document.getElementById('route-url');
            const exploreButton = document.getElementById('explore-route');
            const providerId = '{{providerId}}';

            // Update URL as user types
            routeInput.addEventListener('input', () => {
                routeUrl.textContent = `https://oapis.org/openapi/${providerId}/${routeInput.value}`;
            });

            // Handle explore button click
            exploreButton.addEventListener('click', () => {
                if (routeInput.value.trim()) {
                    window.open(`https://oapis.org/openapi/${providerId}/${routeInput.value}`, '_blank');
                }
            });

            // Handle enter key press
            routeInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter' && routeInput.value.trim()) {
                    window.open(`https://oapis.org/openapi/${providerId}/${routeInput.value}`, '_blank');
                }
            });
        }

        // Initialize on page load
        window.addEventListener('DOMContentLoaded', () => {
            fetchSpecifications();
            setupRouteExplorer();
        });
    </script>
</body>

</html>